import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:travel/model/hotel.dart';
import 'package:travel/ui/draw_under_line.dart';
import 'package:travel/utils/colors.dart';
import 'package:travel/utils/radian.dart';
import 'package:travel/utils/styles.dart';
import 'package:travel/utils/tools.dart';
import 'package:travel/screen/flutter_screenutil.dart';

class HotelReserveController extends GetxController {
  Rx<HotelModel> hotel = Rx(HotelModel(
      name: '锦江之星风尚酒店(北海三里屯店)',
      address: '北海市海城区东直门外南二里庄29号1幢',
      price: 579,
      area: '海城区',
      imgUrl:
          'https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00002-713.jpg'));

  RxInt count = 1.obs;

  RxString name = RxString('');

  RxString mobile = RxString('');

  RxBool isSelected = true.obs;

  RxString remark = RxString('');

  @override
  void onInit() {
    if (Get.arguments != null) {
      hotel.value = Get.arguments['hotel'];
    }
    super.onInit();
  }
}

class HotelReserveView extends GetView<HotelReserveController> {
  const HotelReserveView({super.key});

  @override
  Widget build(BuildContext context) {
    return Obx(() => Scaffold(
          backgroundColor: ColorsUtils.parseColorFromHexString(ColorsUtils.colorF7f7),
          appBar: AppBar(
            automaticallyImplyLeading: true,
            backgroundColor: Colors.white,
            leading: InkWell(
              onTap: Get.back,
              child: Icon(
                Icons.arrow_back_ios,
                color: ColorsUtils.parseColorFromHexString(ColorsUtils.color3333),
                size: 20.w,
              ),
            ),
            leadingWidth: 40.w,
            title: Text(
              controller.hotel.value.name,
              style: StylesUtils.customTextStyle(fontSize: 16.sp, color: ColorsUtils.color0000),
              maxLines: 1,
              overflow: TextOverflow.ellipsis,
            ),
            centerTitle: true,
          ),
          body: SingleChildScrollView(
            child: Column(
              children: [
                Container(
                  decoration: const BoxDecoration(color: Colors.white),
                  padding: EdgeInsets.only(top: 15.h, bottom: 10.h, left: 15.w),
                  child: ListBody(
                    children: [
                      Container(
                        alignment: Alignment.centerLeft,
                        child: Text.rich(TextSpan(children: [
                          TextSpan(
                              text: '特惠大床房',
                              style: StylesUtils.customTextStyle(
                                  fontSize: 15.sp,
                                  color: ColorsUtils.color3333,
                                  fontWeight: FontWeight.w700)),
                          TextSpan(
                              text: ' | ',
                              style: StylesUtils.customTextStyle(
                                  color: ColorsUtils.colorCccc,
                                  fontWeight: FontWeight.w700,
                                  fontSize: 15.sp)),
                          TextSpan(
                              text: '1张1.8米大床　无早餐',
                              style: StylesUtils.customTextStyle(
                                  fontSize: 15.sp,
                                  color: ColorsUtils.color3333,
                                  fontWeight: FontWeight.w700)),
                        ])),
                      ),
                      Container(
                        margin: EdgeInsets.only(top: 10.h),
                        alignment: Alignment.centerLeft,
                        child: Text('11月25日 今天 - 11月26日 明天　1晚',
                            style: StylesUtils.customTextStyle(
                                fontSize: 15.sp,
                                color: ColorsUtils.color3333,
                                fontWeight: FontWeight.w700)),
                      ),
                    ],
                  ),
                ),
                Container(
                  margin: EdgeInsets.only(top: 15.h),
                  child: Center(
                    child: Container(
                      width: 345.w,
                      padding: EdgeInsets.symmetric(horizontal: 15.w),
                      decoration: BoxDecoration(
                          color: Colors.white, borderRadius: BorderRadius.circular(8.w)),
                      child: ListBody(
                        children: [
                          DrawUnderLine(
                              color: ColorsUtils.parseColorFromHexString(ColorsUtils.colorF5f5),
                              strokeWidth: 2.0,
                              child: Container(
                                height: 50.h,
                                alignment: Alignment.centerLeft,
                                child: Text(
                                  '订房信息',
                                  style: StylesUtils.customTextStyle(
                                      color: ColorsUtils.color3333,
                                      fontSize: 16.sp,
                                      fontWeight: FontWeight.w700),
                                ),
                              )),
                          DrawUnderLine(
                              color: ColorsUtils.parseColorFromHexString(ColorsUtils.colorF5f5),
                              strokeWidth: 2.0,
                              child: Container(
                                height: 50.h,
                                alignment: Alignment.centerLeft,
                                child: Row(
                                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                  children: [
                                    Text(
                                      '房间数量',
                                      style: StylesUtils.customTextStyle(
                                          color: ColorsUtils.color3333, fontSize: 15.sp),
                                    ),
                                    Wrap(
                                      spacing: 10.w,
                                      children: [
                                        InkWell(
                                          onTap: () {
                                            if (controller.count > 1) {
                                              controller.count.value--;
                                            }
                                          },
                                          child: SizedBox(
                                            width: 22,
                                            height: 22,
                                            child: CustomPaint(
                                              painter: _MyCustomPainter(),
                                              child: Center(
                                                child: Text(
                                                  '━',
                                                  style: StylesUtils.customTextStyle(
                                                      fontSize: 13.sp,
                                                      color: ColorsUtils.color6799),
                                                ),
                                              ),
                                            ),
                                          ),
                                        ),
                                        Text(
                                          '${controller.count.value} 间',
                                          style: StylesUtils.customTextStyle(
                                              fontSize: 16.sp, color: ColorsUtils.color3333),
                                        ),
                                        InkWell(
                                            onTap: () {
                                              controller.count.value++;
                                            },
                                            child: SizedBox(
                                              width: 22,
                                              height: 22,
                                              child: CustomPaint(
                                                painter: _MyCustomPainter(),
                                                child: Center(
                                                  child: Text(
                                                    '✚',
                                                    style: StylesUtils.customTextStyle(
                                                        fontSize: 13.sp,
                                                        color: ColorsUtils.color6799),
                                                  ),
                                                ),
                                              ),
                                            ))
                                      ],
                                    )
                                  ],
                                ),
                              )),
                          DrawUnderLine(
                              color: ColorsUtils.parseColorFromHexString(ColorsUtils.colorF5f5),
                              strokeWidth: 2.0,
                              child: Container(
                                alignment: Alignment.centerLeft,
                                height: 50.h,
                                child: Row(
                                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                  children: [
                                    Text(
                                      '租客姓名',
                                      style: StylesUtils.customTextStyle(
                                          fontSize: 15.sp, color: ColorsUtils.color3333),
                                    ),
                                    Expanded(
                                        child: Align(
                                      alignment: Alignment.centerRight,
                                      child: Container(
                                        width: 220.w,
                                        alignment: Alignment.centerLeft,
                                        child: TextField(
                                          cursorWidth: 2.0,
                                          cursorRadius: const Radius.circular(2),
                                          cursorColor: ColorsUtils.parseColorFromHexString(
                                              ColorsUtils.color3333),
                                          style: StylesUtils.customTextStyle(
                                              fontSize: 15.sp, color: ColorsUtils.color3333),
                                          decoration: InputDecoration(
                                            border: InputBorder.none,
                                            focusedBorder: InputBorder.none,
                                            hintText: '请输入租客姓名',
                                            contentPadding: EdgeInsets.symmetric(vertical: 12.h),
                                            isCollapsed: true,
                                            isDense: true,
                                            filled: true,
                                            fillColor: ColorsUtils.rgba(255, 255, 255, 0),
                                            hintStyle: StylesUtils.customTextStyle(
                                              color: ColorsUtils.color9999,
                                            ),
                                            constraints: BoxConstraints(maxHeight: 38.h),
                                            suffixIcon: ToolsUtils.assetImageSvg('u1589.svg',
                                                width: 20.w, height: 20.h),
                                            suffixIconConstraints:
                                                BoxConstraints.expand(width: 20.w, height: 20.h),
                                          ),
                                          onChanged: (String keyword) {
                                            controller.name.value = keyword;
                                          },
                                        ),
                                      ),
                                    ))
                                  ],
                                ),
                              )),
                          DrawUnderLine(
                              color: ColorsUtils.parseColorFromHexString(ColorsUtils.colorF5f5),
                              strokeWidth: 2.0,
                              child: Container(
                                alignment: Alignment.centerLeft,
                                height: 50.h,
                                child: Row(
                                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                  children: [
                                    Text(
                                      '联系手机',
                                      style: StylesUtils.customTextStyle(
                                          fontSize: 15.sp, color: ColorsUtils.color3333),
                                    ),
                                    Expanded(
                                        child: Align(
                                      alignment: Alignment.centerRight,
                                      child: Container(
                                        width: 220.w,
                                        alignment: Alignment.centerLeft,
                                        child: TextField(
                                          keyboardType: TextInputType.phone,
                                          cursorWidth: 2.0,
                                          cursorRadius: const Radius.circular(2),
                                          cursorColor: ColorsUtils.parseColorFromHexString(
                                              ColorsUtils.color3333),
                                          style: StylesUtils.customTextStyle(
                                              fontSize: 15.sp, color: ColorsUtils.color3333),
                                          decoration: InputDecoration(
                                            border: InputBorder.none,
                                            focusedBorder: InputBorder.none,
                                            hintText: '请输入境内手机号',
                                            contentPadding: EdgeInsets.symmetric(vertical: 12.h),
                                            isCollapsed: true,
                                            isDense: true,
                                            filled: true,
                                            fillColor: ColorsUtils.rgba(255, 255, 255, 0),
                                            hintStyle: StylesUtils.customTextStyle(
                                              color: ColorsUtils.color9999,
                                            ),
                                            constraints: BoxConstraints(maxHeight: 38.h),
                                          ),
                                          onChanged: (String keyword) {
                                            controller.mobile.value = keyword;
                                          },
                                        ),
                                      ),
                                    ))
                                  ],
                                ),
                              )),
                          Container(
                            alignment: Alignment.centerLeft,
                            height: 50.h,
                            child: Row(
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              children: [
                                Text(
                                  '预计到店',
                                  style: StylesUtils.customTextStyle(
                                      fontSize: 15.sp, color: ColorsUtils.color3333),
                                ),
                                Expanded(
                                    child: Align(
                                  alignment: Alignment.centerRight,
                                  child: Container(
                                    alignment: Alignment.centerLeft,
                                    width: 220.w,
                                    child: Row(
                                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                      children: [
                                        Text(
                                          '次日06:00前办理入住',
                                          style: StylesUtils.customTextStyle(
                                              fontSize: 15.sp, color: ColorsUtils.color3333),
                                        ),
                                        Icon(
                                          Icons.arrow_forward_ios,
                                          color: ColorsUtils.parseColorFromHexString(
                                              ColorsUtils.colorCccc),
                                          size: 12.w,
                                        )
                                      ],
                                    ),
                                  ),
                                ))
                              ],
                            ),
                          )
                        ],
                      ),
                    ),
                  ),
                ),
                Container(
                  margin: EdgeInsets.only(top: 15.h),
                  child: Center(
                    child: Container(
                      width: 345.w,
                      padding: EdgeInsets.symmetric(horizontal: 15.w),
                      decoration: BoxDecoration(
                          color: Colors.white, borderRadius: BorderRadius.circular(8.w)),
                      child: ListBody(
                        children: [
                          Container(
                            height: 50.h,
                            alignment: Alignment.centerLeft,
                            child: Text(
                              '发票信息',
                              style: StylesUtils.customTextStyle(
                                  color: ColorsUtils.color3333,
                                  fontSize: 16.sp,
                                  fontWeight: FontWeight.w700),
                            ),
                          ),
                          Container(
                            padding: EdgeInsets.only(top: 10.h, bottom: 15.h),
                            child: ListBody(
                              children: [
                                Container(
                                  alignment: Alignment.centerLeft,
                                  child: Text.rich(TextSpan(children: [
                                    TextSpan(
                                        text: '酒店开票',
                                        style: StylesUtils.customTextStyle(
                                            color: ColorsUtils.color3333, fontSize: 15.sp)),
                                    TextSpan(
                                        text: ' • ',
                                        style: StylesUtils.customTextStyle(
                                            color: ColorsUtils.color6666)),
                                    TextSpan(
                                        text: '可预约',
                                        style: StylesUtils.customTextStyle(
                                            color: ColorsUtils.color3333, fontSize: 15.sp)),
                                  ])),
                                ),
                                Container(
                                  margin: EdgeInsets.only(top: 10.h),
                                  alignment: Alignment.centerLeft,
                                  child: Text(
                                    '支持普通发票，确认订单后电话联系客服预约开票',
                                    style: StylesUtils.customTextStyle(
                                        fontSize: 12.sp, color: ColorsUtils.color9999),
                                  ),
                                )
                              ],
                            ),
                          )
                        ],
                      ),
                    ),
                  ),
                ),
                Container(
                  margin: EdgeInsets.only(top: 15.h),
                  child: Center(
                    child: Container(
                      width: 345.w,
                      padding: EdgeInsets.symmetric(horizontal: 15.w),
                      decoration: BoxDecoration(
                          color: Colors.white, borderRadius: BorderRadius.circular(8.w)),
                      child: ListBody(
                        children: [
                          Container(
                            height: 50.h,
                            alignment: Alignment.centerLeft,
                            child: Text(
                              '保障出行',
                              style: StylesUtils.customTextStyle(
                                  color: ColorsUtils.color3333,
                                  fontSize: 16.sp,
                                  fontWeight: FontWeight.w700),
                            ),
                          ),
                          Container(
                            padding: EdgeInsets.only(top: 10.h, bottom: 15.h),
                            child: Stack(
                              children: [
                                ListBody(
                                  children: [
                                    Container(
                                      alignment: Alignment.centerLeft,
                                      child: Text('平安无理由取消险',
                                          style: StylesUtils.customTextStyle(
                                              color: ColorsUtils.color3333, fontSize: 15.sp)),
                                    ),
                                    Container(
                                      margin: EdgeInsets.only(top: 10.h),
                                      alignment: Alignment.centerLeft,
                                      child: Text(
                                        '可承担取消订单90%的房费损失',
                                        style: StylesUtils.customTextStyle(
                                            fontSize: 12.sp, color: ColorsUtils.color9999),
                                      ),
                                    )
                                  ],
                                ),
                                Positioned(
                                    top: 0,
                                    right: 0,
                                    bottom: 0,
                                    child: InkWell(
                                      onTap: () {
                                        controller.isSelected.value = !controller.isSelected.value;
                                      },
                                      child: Center(
                                        child: Text.rich(TextSpan(children: [
                                          TextSpan(
                                              text: '￥',
                                              style: StylesUtils.customTextStyle(
                                                  color: ColorsUtils.colorD900, fontSize: 13.sp)),
                                          TextSpan(
                                              text: ' 10 ',
                                              style: StylesUtils.customTextStyle(
                                                  color: ColorsUtils.colorD900, fontSize: 18.sp)),
                                          WidgetSpan(
                                              child: ToolsUtils.assetImageSvg(
                                                  controller.isSelected.isTrue
                                                      ? 'u1069_selected.svg'
                                                      : 'u1069.svg',
                                                  width: 22.w,
                                                  height: 22.h),
                                              alignment: PlaceholderAlignment.middle)
                                        ])),
                                      ),
                                    ))
                              ],
                            ),
                          )
                        ],
                      ),
                    ),
                  ),
                ),
                Container(
                  margin: EdgeInsets.only(top: 15.h),
                  child: Center(
                    child: Container(
                      width: 345.w,
                      padding: EdgeInsets.symmetric(horizontal: 15.w),
                      decoration: BoxDecoration(
                          color: Colors.white, borderRadius: BorderRadius.circular(8.w)),
                      child: ListBody(
                        children: [
                          Container(
                            height: 50.h,
                            alignment: Alignment.centerLeft,
                            child: Text(
                              '备注信息',
                              style: StylesUtils.customTextStyle(
                                  color: ColorsUtils.color3333,
                                  fontSize: 16.sp,
                                  fontWeight: FontWeight.w700),
                            ),
                          ),
                          Container(
                            alignment: Alignment.centerLeft,
                            padding: EdgeInsets.only(top: 5.h, bottom: 10.h),
                            child: TextField(
                              keyboardType: TextInputType.text,
                              cursorWidth: 2.0,
                              cursorRadius: const Radius.circular(2),
                              cursorColor:
                                  ColorsUtils.parseColorFromHexString(ColorsUtils.color3333),
                              style: StylesUtils.customTextStyle(
                                  fontSize: 15.sp, color: ColorsUtils.color3333),
                              decoration: InputDecoration(
                                border: InputBorder.none,
                                focusedBorder: InputBorder.none,
                                hintText: '可输入客人一些特殊情况和需求',
                                contentPadding: EdgeInsets.symmetric(vertical: 12.h),
                                isCollapsed: true,
                                isDense: true,
                                filled: true,
                                fillColor: ColorsUtils.rgba(255, 255, 255, 0),
                                hintStyle: StylesUtils.customTextStyle(
                                  color: ColorsUtils.color9999,
                                ),
                                constraints: BoxConstraints(minHeight: 38.h),
                              ),
                              onChanged: (String keyword) {
                                controller.remark.value = keyword;
                              },
                            ),
                          )
                        ],
                      ),
                    ),
                  ),
                ),
                Container(
                  alignment: Alignment.center,
                  margin: EdgeInsets.only(top: 10.h),
                  padding: EdgeInsets.only(bottom: 15.h),
                  child: SizedBox(
                    width: 345.w,
                    child: ListBody(
                      children: [
                        Container(
                          alignment: Alignment.centerLeft,
                          child: Text(
                            '请您在提交订单前仔细阅读《订阅条款》',
                            style: StylesUtils.customTextStyle(
                                fontSize: 12.sp, color: ColorsUtils.color9999),
                          ),
                        ),
                        Container(
                          alignment: Alignment.centerLeft,
                          margin: EdgeInsets.symmetric(vertical: 15.h),
                          child: Text(
                            '为支付绿色环保，需理解并同意电子合同的有效性。如需要签署纸质合同，请联系客服',
                            style: StylesUtils.customTextStyle(
                                fontSize: 12.sp, color: ColorsUtils.color9999, lineHeight: 1.4.h),
                          ),
                        ),
                        Container(
                          alignment: Alignment.centerLeft,
                          child: Text(
                            '交易款项由小默旅行公司统一收取',
                            style: StylesUtils.customTextStyle(
                                fontSize: 12.sp, color: ColorsUtils.color9999),
                          ),
                        ),
                      ],
                    ),
                  ),
                )
              ],
            ),
          ),
          bottomNavigationBar: SafeArea(
            bottom: true,
            child: Container(
              height: 70.h,
              padding: EdgeInsets.only(top: 10.h, left: 20.w, right: 20.w),
              alignment: Alignment.topLeft,
              decoration: const BoxDecoration(color: Colors.white),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text.rich(TextSpan(children: [
                    TextSpan(
                        text: '合计：',
                        style: StylesUtils.customTextStyle(color: ColorsUtils.color3333)),
                    TextSpan(
                        text: '￥',
                        style: StylesUtils.customTextStyle(
                            color: ColorsUtils.colorD900, fontSize: 13.sp)),
                    TextSpan(
                        text: '${controller.hotel.value.price}',
                        style: StylesUtils.customTextStyle(
                            color: ColorsUtils.colorD900, fontSize: 24.sp))
                  ])),
                  Container(
                    constraints: BoxConstraints.expand(width: 110.w, height: 40.h),
                    alignment: Alignment.center,
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(5.w),
                        gradient: LinearGradient(colors: [
                          ColorsUtils.rgba(52, 120, 246, 1),
                          ColorsUtils.rgba(2, 167, 240, 1)
                        ], stops: const [
                          0.0,
                          0.99
                        ], transform: GradientRotation(RadianUtils.angleToRadian(90)))),
                    child: TextButton(
                        onPressed: () {},
                        child: Text(
                          '在线支付',
                          style: StylesUtils.customTextStyle(fontSize: 15.sp),
                        )),
                  )
                ],
              ),
            ),
          ),
        ));
  }
}

class _MyCustomPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final Paint paint = Paint()
      ..color = ColorsUtils.parseColorFromHexString(ColorsUtils.color6799)
      ..style = PaintingStyle.stroke
      ..strokeWidth = 1.0;
    Rect rect =
        Rect.fromCircle(center: Offset(size.width / 2, size.height / 2), radius: size.width / 2);
    canvas.drawOval(rect, paint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return this != oldDelegate;
  }
}
